<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../../static/css/aui.min.css"/>
		<title>加入购物车</title>
		<style type="text/css">
			body{margin: 0; padding: 0;}
			.aui-header{position: fixed;}
			.aui-content {width: 100vw; height: auto; background: #F2F2F2; font-size: 0; box-sizing: border-box; overflow: auto; margin: 0 auto; position: relative;}			
			.goods-box {width: -webkit-calc((100% - 20px) / 2); min-height: 150px; background: #FFF; margin: 5px; text-align: center; font-size: 14px; display: inline-block; vertical-align: top;}
			.goods-box .goods-img{width: 100%; min-height: 100px; display: inline-block;}
			.goods-box .goods-info{width: 100%; height: 50px; display: inline-block; font-size: 0; vertical-align: top;}
			.goods-box .goods-name{width: -webkit-calc(100% - 50px); height: 50px; line-height: 50px; text-align: left; padding-left: 15px; box-sizing: border-box; font-size: 14px; display: inline-block; vertical-align: top;}
			.goods-box .addcart{width: 50px; height: 50px; line-height: 50px; display: inline-block; text-align: center; font-size: 25px; font-weight: 600; color: var(--aui-red); vertical-align: top;}
			.footer{width: 100%; height: 50px; background-color: #FFF; position: fixed; bottom: 0; left: 0; z-index: 2;}
			.shopping-cart {height: 50px; line-height: 50px; padding: 0 15px; font-size: 18px;; position: absolute; left: 0; bottom: 0px; background: #f6a820; color: #FFF; text-align: center;}			
			.move {width: 25px; height: 25px; border-radius: 50%; background: red; position: absolute; left: 0; bottom: 0; opacity: 0.6; display: none;}			
			.show-time {width: 100px; height: 30px; font-size: 15px; position: absolute; left: calc(50% - 60px); bottom: 50px; border: 1px solid #f00; line-height: 30px; text-align: center;}
		</style>
	</head>
	<body>
		<div class="container" id="app">
			<header class="aui-header">
				<a class="aui-header-left" onclick="aui.closeWin()"><i class="iconfont iconreturn"></i></a>
				<div class="aui-header-title">加入购物车</div>
			</header>
			<div class="aui-content" v-cloak  style="padding: 60px 10px 50px 10px;">
				<div class="goods-box" v-cloak v-for="item in goods" :data-id="item.id">
					<img :src="item.image" alt="" class="goods-img" />
					<div class="goods-info">
						<div class="goods-name">{{item.name}}</div>
						<div class="addcart" :class="'addcart-'+item.id" :id="item.id" @click.stop="addcart(item.id)">＋</div>
					</div>
				</div>							
				<div class="move"></div>				
			</div>
			<div class="footer">
				<div class="shopping-cart">购物车</div>
			</div>
		</div>
	</body>	
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js" charset="utf-8"></script>
	<script type="text/javascript" src="../../../lib/vue.min.js" charset="utf-8"></script>
	<script type="text/javascript" src="../../../lib/jquery/jquery-2.1.3.min.js" charset="utf-8"></script>
	<script type="text/javascript" src="../../../static/js/aui.min.js" charset="utf-8"></script>
	<script type="text/javascript" src="../../../static/js/aui.parabola.js" charset="utf-8"></script>
	<script type="text/javascript">
		window.onload = function(){
			apiready();
		}
		apiready = function() {
			var vm = new Vue({
				el: "#app",
				data: {
					goods: [
						{id: 0, name: '商品1', image: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=108319208,2720547373&fm=26&gp=0.jpg'},
						{id: 1, name: '商品2', image: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1516114892,2898856277&fm=26&gp=0.jpg'},
						{id: 2, name: '商品3', image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3561140767,3814617363&fm=26&gp=0.jpg'},
						{id: 3, name: '商品4', image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4041407228,173595646&fm=26&gp=0.jpg'},
						{id: 4, name: '商品5', image: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1704720109,1691236902&fm=26&gp=0.jpg'},
						{id: 5, name: '商品6', image: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3561125948,1887913150&fm=26&gp=0.jpg'},
						{id: 6, name: '商品7', image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4041407228,173595646&fm=26&gp=0.jpg'},
						{id: 7, name: '商品8', image: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1516114892,2898856277&fm=26&gp=0.jpg'},
						{id: 8, name: '商品9', image: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3561125948,1887913150&fm=26&gp=0.jpg'}
					]
				},
				created: function(){
					var _this = this;
				},
				mounted: function() {
					var _this = this;
		        },
		        updated: function () {
		            var _this = this;
		            _this.$nextTick(function () {
		
		            })
		        },
		        methods: {						
					addcart(id){
						var _this = this;
						aui.parabola.init({
							origin: '.addcart-' + id,
							target: '.shopping-cart',
							element: '.move',
							radian: 0.008,
							time: 500, 
							callback: function(){
								aui.toast({msg: '已加入购物车'});
							}
						});
						aui.parabola.move();
					},
		        }
			});
		}		
	</script>

</html>